@include('backstage/public/_header')
    <style type="text/css">
        table.list_tab tr {
            line-height: 17px;
        }
        .leve_1 {   
            background: #ffffff!important;
        }
        .leve_2 {   
            background: #f3f3f3!important;
        }
        .leve_3 {
            background: #f6f6f6!important;
        }
        .leve_3 {
            background: #f9f9f9!important;
        }
        .leve_4 {
            background: #ffffff!important;
        }
        .leve_1 .checkSon{
            padding-left: 0px;
        }

        .leve_2 .checkSon{
            padding-left: 10px;
        }

        .leve_3 .checkSon{
            padding-left: 20px;
        }

        .leve_4 .checkSon{
            padding-left: 30px;
        }

        .leve_5 .checkSon{
            padding-left: 40px;
        }
    </style>
    <!--結果頁快捷搜索框 開始-->
    <!-- <div class="search_wrap">
        <form action="/backstage/global/area" method="get">
            <table class="search_tab">
                <tr>
                    <th width="100">地區關鍵字:</th>
                    <td><input type="text" name="keywords" placeholder="關鍵字", value="@if(isset($_GET['keywords'])){{$_GET['keywords']}}@endif"></td>
                    <td><input type="submit" name="sub" value="查詢"></td>
                </tr>
            </table>
        </form>
    </div> -->
    <!--結果頁快捷搜索框 結束-->

    <!--搜索結果頁面 列表 開始-->
    <div class="result_wrap">
        <!--快捷導航 開始-->
        <div class="result_content">
            <div class="short_wrap">
                <a href="javascript:void(0);" onclick="openRim();"><i class="fa fa-plus"></i>添加地區</a>
                <a href="javascript:void(0);" onclick="del();" ><i class="fa fa-recycle"></i>批量刪除</a>
                <a href="adds"><i class="fa fa-plus-square"></i>批量添加地區</a>
            </div>
        </div>
        <!--快捷導航 結束-->
    </div>

    <div class="result_wrap">
        <div class="result_content">
            <table class="list_tab" id="area_list">
                <tr>
                    <th class="tc" width="100"><input type="checkbox" id="checkAll" value="0"></th>
                    <th class="tc" width="200">ID</th>
                    <th>地區名稱</th>
                    <th width="250">地區排序</th>
                    <th width="250">操作</th>
                </tr>
                @foreach ($list as $vb)
                    <tr id="list_{{$vb->id}}" class="leve_1" typeid="{{$vb->id}}" parentid="{{$vb->pid}}" flag="0" val="{{$vb->name}}">
                        <td class="tc"><input type="checkbox" name="checkbox" value="{{$vb->id}}"></td>
                        <td class="tc">{{$vb->id}}</td>
                        <td class="checkSon"><i class="fa fa-plus-square-o" style="cursor:pointer;" data="son"></i>{{$vb->name}}</td>
                        <td>{{$vb->sort_order}}</td>
                        <td>
                            <a href="javascript:void(0);" onclick="openRim({{$vb->id}});" >編輯</a>
                            <a href="javascript:void(0);" onclick="del({{$vb->id}});">刪除</a>
                        </td>
                    </tr>
                @endforeach
            </table>
        </div>
    </div>
    <!--搜索結果頁面 列表 結束-->
    <script type="text/javascript">
        $(function(){
            $("#area_list").bind("click", function(event){
                var _this = $(event.target);//獲取當前點擊元素
                if(!$(_this).attr("data")) return ;//如果被點擊的元素不是span即+-號就不繼續執行
                var _parents = $(event.target).parents('tr');//獲取當前點擊元素所在行
                // 判斷是否加載子地區
                var typeid = $(_parents).attr('typeid');
                var status = $(_parents).attr('flag');//判斷加載狀態
                // var sonTree = $('input[type="checkbox"]');
                // var sonTree = $('#area_list tr[parentid="'+typeid+'"]');//子集
                var sonArr = getSon(typeid);//子孫集
                // console.log(1);
                // 判斷是否有子元素是否有子元素
                if($(_this).hasClass('fa-plus-square-o')){
                    $(_this).addClass('fa-minus-square-o').removeClass('fa-plus-square-o');
                    
                    if(status==0){
                        $.post("/backstage/area/getArea", { 'id':typeid,"_token":"{{csrf_token()}}"},
                        function (res){
                            if(res.status==1){
                                $("#area_list tr[typeid="+res.data.typeid+"]").after(res.data.inner);
                                $("#area_list tr[typeid="+res.data.typeid+"]").attr('flag',1);
                            }else{
                                layer.msg('加載列表錯誤', {icon: 2});
                            }
                        }, "json");
                    }else{
                        // var sonTree = $('#area_list tr[parentid="'+typeid+'"]');//子集
                        // sonTree.show();
                        for(var i = 0; i < sonArr.length; i++){
                            if(sonArr[i].attr('parentid')==typeid){
                                sonArr[i].show();
                            }else{
                                var pid = sonArr[i].attr('parentid');
                                $parent = $("#area_list tr[typeid="+pid+"]").find('i.fa').hasClass('fa-minus-square-o');
                                // console.log($aa);
                                if($parent){
                                    sonArr[i].show();
                                }
                            }
                        }
                        // sonTree.css("display","");
                    }
                }else{
                    $(_this).addClass('fa-plus-square-o').removeClass('fa-minus-square-o');
                    // console.log(sonTree);
                    // sonTree.css("display","none");
                    // console.log(sonArr);
                    for(var i = 0; i < sonArr.length; i++){
                        sonArr[i].hide();
                    }
                }
                
            });
        });
        // 判斷是否有子元素是否有子元素，如果有放回所有的子集
        function getSon(id,sonArr=[]){
            var sonTree = $('#area_list tr[parentid="'+id+'"]');//子集
            sonArr.unshift(sonTree);
            for(var i = 0; i < sonTree.length; i++){
                var typeid = $(sonTree[i]).attr('typeid');//孫集typeid
                var grandson = $('#area_list tr[parentid="'+typeid+'"]');//孫集
                if(grandson.length>0){
                    sonArr = getSon(typeid,sonArr);
                }
            }
            return sonArr;
        }
        function getChecked() {
            var gids = new Array();
            $.each($('input:checked'), function(i, n){
                if($(n).val()!=0) gids.push( $(n).val() );
            });
            return gids;
        }
        //刪除
        function del(aid){
            aid = aid ? aid : getChecked();
            // console.log(aid);
            //詢問框
            layer.confirm('刪除後不可恢復，確定要刪除嗎？', {
              btn: ['確定','取消'] //按鈕
            }, function(){
                aid = aid.toString();
                // console.log(aid);
                if(aid == '') return layer.msg('未選中任何數據', {icon: 2,anim: 6});
                // layer.msg('正在刪除...', {icon: 16,shade: 0.01});
                $.post("{{$dodel}}", { 'idstr':aid,"_token":"{{csrf_token()}}"},
                function (data){
                    if(data.status==1){
                        layer.msg('正在刪除...', {icon: 16,shade: 0.01});
                        setTimeout(function(){
                            aid = aid.split(',');
                            $.each(aid, function(i,n){
                                $('#list_'+n).remove();
                            });
                            layer.msg(data.message, {icon: 1});
                        },2000);
                    }else if(data.status==0){
                        layer.msg(data.message, {icon: 2});
                    }else if(data.status==-1){
                        layer.alert(data.message, {icon: 2,anim:6});
                    }else if(data.status==2){
                        layer.msg(data.message, {icon: 7});
                    }else{
                        layer.msg('未知原因，刪除失敗', {icon: 2});
                    }
                }, "json");
            });
        }
        function openRim(id) {
            if(id){
                var _name = $('#list_'+id).attr('val');
                var _pid = $('#list_'+id).attr('parentid');
                var _id = $('#list_'+id).attr('typeid');
                //修改地區
                layer.open({
                  type: 1,
                  title:'編輯地區',
                  skin: 'layui-layer-rim', //加上邊框
                  area: ['1000px', '500px'], //寬高
                  content: '<form id="form_data">{{csrf_field()}}<input type="hidden" name="id" value="'+_id+'" /><table class="add_tab"><tbody><tr><th><i class="require">*</i>地區名稱：</th><td><input type="text" class="lg" name="name" id="name" value="'+_name+'"><span color="darkred"><i class="fa fa-exclamation-circle yellow"></i>地區名稱不能為空</span></td></tr><tr><th width="120"><i class="require">*</i>上級地區：</th><td><select name="pid" id="pid"><option value="0" @if('+_pid+'==0) selected="selected" @endif>壹級地區</option>@foreach($areas as $v)<option value="{{$v->id}}" @if($v->id=='+_pid+') selected="selected" @endif>{!!$v->name!!}</option>@endforeach</select><span color="darkred"><i class="fa fa-exclamation-circle yellow"></i>壹級地區沒有父分類</span></td></tr></tbody></table><div class="btn_group" style="padding-left:131px;"><input type="button" value="確定" id="btnSub" onclick="onSubmit();"></div></form><div class="tips"><h3>修改地區說明</h3><p>1、帶<i class="require">*</i>為必填項，不允許為空</p><p>2、頂級分類無父分類</p><p>3、地區名稱註意 用中文字符，號隔開不要弄成英文,</p><p>4、點擊確定 -&gt; 添加地區/p></div>'
                });
            }else{
                //添加地區
                layer.open({
                  type: 1,
                  title:'添加地區',
                  skin: 'layui-layer-rim', //加上邊框
                  area: ['1000px', '500px'], //寬高
                  content: '<form id="form_data">{{csrf_field()}}<table class="add_tab"><tbody><tr><th><i class="require">*</i>地區名稱：</th><td><input type="text" class="lg" name="name" id="name" value=""><span color="darkred"><i class="fa fa-exclamation-circle yellow"></i>地區名稱不能為空</span></td></tr><tr><th width="120"><i class="require">*</i>上級地區：</th><td><select name="pid" id="pid"><option value="0">壹級地區</option>@foreach($areas as $v)<option value="{{$v->id}}">{!!$v->name!!}</option>@endforeach</select><span color="darkred"><i class="fa fa-exclamation-circle yellow"></i>壹級地區沒有父分類</span></td></tr></tbody></table><div class="btn_group" style="padding-left:131px;"><input type="button" value="確定" id="btnSub" onclick="onSubmit();"></div></form><div class="tips"><h3>添加地區說明</h3><p>1、帶<i class="require">*</i>為必填項，不允許為空</p><p>2、頂級分類無父分類</p><p>3、地區名稱註意 用中文字符，號隔開不要弄成英文,</p><p>4、點擊確定 -&gt; 修改地區</p></div>'
                });
            }
            
        }
        // 確定
        var vfTime = 2;
        var timer=null;
        function onSubmit(){
            var name = $("#name").val();
            if (vfTime!=0 && timer!=null){
                layer.msg('操作過於頻繁', {icon: 7,anim: 6});
                // setTimeout(function(){$("#chiContent").focus();}, 1500);
                return false;
            }
            if (name==''){
                layer.msg('地區名稱不能為空', {icon: 5,anim: 6});
                // setTimeout(function(){$("#chiContent").focus();}, 1500);
                return false;
            }
            
            var form = new FormData(document.getElementById("form_data"));
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
            $.ajax({
                url:"{{$doadd}}",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                dataType : "json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.message, {icon: 6});
                        setTimeout(function(){
                            $('.layui-layer-close').click();
                        },2000);
                    }else if(data.status==-1){
                        layer.alert(data.message, {icon: 2,anim:6});
                    }else{
                        layer.msg(data.message, {icon: 5});
                    }
                    clearInterval(timer);
                    timer = setInterval(setTime, 1000, "1");
                    
                },
                error:function(e){
                    layer.msg(e, {icon: 5,anim: 6});
                    clearInterval(timer);
                    timer = setInterval(setTime, 1000, "1");
                }
            });
            function setTime(){
                vfTime --;
                if(vfTime==0){
                    clearInterval(timer);
                }
            }     
            // get();//此處為上傳文件的進度條
        }
    </script>
@include('backstage/public/_footer')